<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>报工角色管理</span></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :span="15">
            <a-button @click="handleAdd()" class="hte-btn add-btn" type="primary">新增 </a-button>
            <a-button @click="fetchList" class="hte-btn">刷新</a-button>             
          </a-col>          
        </a-row>
      </div>
      <div class="content-list">
        <a-table
          :columns="columns"
          class="hte-table-content"
          :data-source="records"
          rowKey="id"
          bordered
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <span slot="action" slot-scope="text, record">
            <a-button type="link" @click="handleEdit(record.id)">编辑 </a-button>
            <a-button type="link" @click="handleDele(record.id)">删除 </a-button>
          </span>
          <span slot="showInstallmentList" slot-scope="text, record">
            <span v-if="record.showInstallmentList == '1'">是</span>
            <span v-else>否</span>
          </span>
          <span slot="showNodeTimeList" slot-scope="text, record">
            <span v-if="record.showNodeTimeList == '1'">是</span>
            <span v-else>否</span>
          </span>
          <span slot="showContractAttachList" slot-scope="text, record">
            <span v-if="record.showContractAttachList == '1'">是</span>
            <span v-else>否</span>
          </span>
        </a-table>
      </div>
      <RoleEdit ref="roleEditRef" :show="showEdit" @close="closeRoleEdit" />
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import RoleEdit from '@/views/workReport/role/RoleEdit'
export default {
  components: {
    RoleEdit,
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'RoleList',
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0,
      },
      columns: [
        {
          title: '角色名称',
          dataIndex: 'roleName',
          key: 'roleName',
        },
        // {
        //   title: '合同模板',
        //   dataIndex: 'contractTemplate',
        //   key: 'contractTemplate',
        // },
        // // {
        // //   title: '显示分期付款表',
        // //   dataIndex: 'showInstallmentList',
        // //   key: 'showInstallmentList',
        // //   scopedSlots: { customRender: 'showInstallmentList' },
        // // },
        // // {
        // //   title: '显示节点工期表',
        // //   dataIndex: 'showNodeTimeList',
        // //   key: 'showNodeTimeList',
        // //   scopedSlots: { customRender: 'showNodeTimeList' },
        // // },
        // // {
        // //   title: '显示合同附件',
        // //   dataIndex: 'showContractAttachList',
        // //   key: 'showContractAttachList',
        // //   scopedSlots: { customRender: 'showContractAttachList' },
        // // },
        // {
        //   title: '报工项目模板',
        //   dataIndex: 'projectTemplate',
        //   key: 'projectTemplate',
        // },
        // {
        //   title: '报工任务模板',
        //   dataIndex: 'itemTemplate',
        //   key: 'itemTemplate',
        // },
        {
          title: '角色成员',
          dataIndex: 'defaultRealName',
          key: 'defaultRealName',
          width:"400px"
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],
      records: [],
      urls: {
        list: '/workReport/role/page',
        dele: '/workReport/role/delete',
      },
      showEdit: false,
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      let res = await postAction(this.urls.list, this.ipagination)
      if (res.success) {
        this.records = res.result.records
        this.$set(this.ipagination, 'total', res.result.total)
      }
    },
    /**
     * 表结构切换页码
     */
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.fetchList()
    },
    handleAdd() {
      this.$refs.roleEditRef.fetchData(-1)
      this.showEdit = true
    },
    handleEdit(id) {
      this.$refs.roleEditRef.fetchData(id)
      this.showEdit = true
    },
    closeRoleEdit() {
      this.showEdit = false
      this.fetchList()
    },
    handleDele(id) {
      postAction(this.urls.dele + '/' + id, {}).then((res) => {
        if (res.success) {
          this.$messageWorkReport.success('删除成功')
          this.fetchList()
        } else {
          this.$messageWorkReport.success('删除失败')
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(../~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
      background-color: #fff;
    }
  }
}
</style>